<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <el-col :span="6">
            <el-form-item label="关键词">
              <el-input v-model="query.keyword" placeholder="请输入关键词查询" clearable
                @keyup.enter.native="search()" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="分类">
              <el-select v-model="category" placeholder="请选择分类" clearable filterable>
                <el-option v-for="item in categoryList" :key="item.id" :label="item.fullName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="类型">
              <el-select v-model="webType" placeholder="请选择类型" clearable filterable>
                <el-option v-for="item in options" :key="item.id" :label="item.fullName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="showAll">
            <el-col :span="6">
              <el-form-item label="状态">
                <el-select v-model="isRelease" placeholder="请选择状态" clearable filterable>
                  <el-option v-for="item in releaseOptions" :key="item.id" :label="item.fullName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </template>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search()">
                {{$t('common.search')}}</el-button>
              <el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
              </el-button>
              <el-button type="text" icon="el-icon-arrow-down" @click="showAll=true"
                v-if="!showAll">展开</el-button>
              <el-button type="text" icon="el-icon-arrow-up" @click="showAll=false" v-else>
                收起</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
        <div class="JNPF-common-head">
          <topOpts @add="openAddBox()">
            <upload-btn url="/api/visualdev/OnlineDev/Actions/Import" accept=".vdd"
              @on-success="initData" />
          </topOpts>
          <div class="JNPF-common-head-right">
            <el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
              <el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"
                @click="initData()" />
            </el-tooltip>
          </div>
        </div>
        <JNPF-table v-loading="listLoading" :data="list">
          <el-table-column prop="fullName" label="名称" show-overflow-tooltip min-width="200" />
          <el-table-column prop="enCode" label="编码" width="200" />
          <el-table-column prop="category" label="分类" width="150" />
          <el-table-column prop="webType" label="类型" width="100" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.webType == 4">数据视图</span>
              <span v-else-if="scope.row.enableFlow">流程表单</span>
              <span v-else>普通表单</span>
            </template>
          </el-table-column>
          <el-table-column prop="creatorUser" label="创建人" width="120" />
          <el-table-column prop="creatorTime" label="创建时间" :formatter="jnpf.tableDateFormat"
            width="140" />
          <el-table-column prop="lastModifyTime" label="最后修改时间" :formatter="jnpf.tableDateFormat"
            width="140" />
          <el-table-column prop="sortCode" label="排序" width="70" align="center" />
          <el-table-column prop="state" label="状态" width="80" align="center">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.isRelease == 1 ? 'success' :scope.row.isRelease == 2?'warning': 'info'"
                disable-transitions>
                {{scope.row.isRelease==1?'已发布':scope.row.isRelease == 2?'已修改':'未发布'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="150">
            <template slot-scope="scope">
              <tableOpts @edit="addOrUpdateHandle(scope.row.id,scope.row.webType)"
                @del="handleDel(scope.row.id)">
                <el-dropdown>
                  <span class="el-dropdown-link">
                    <el-button type="text" size="mini">{{$t('common.moreBtn')}}<i
                        class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="handleEngine(scope.row.id)"
                      v-if="scope.row.enableFlow">
                      流程设计
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="showManage(scope.row.id,scope.row.fullName)"
                      v-if="scope.row.enableFlow">流程版本
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="preview(scope.row.id,0)">设计预览
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="openReleaseDialog(scope.row)">发布表单
                    </el-dropdown-item>
                    <el-dropdown-item v-if="scope.row.isRelease!=0"
                      @click.native="preview(scope.row.id,scope.row.isRelease)">发布预览
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="copy(scope.row.id)">复制表单</el-dropdown-item>
                    <el-dropdown-item @click.native="exportModel(scope.row.id)">导出表单
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="handleLink(scope.row.id)"
                      v-if="scope.row.webType!=4&&!scope.row.enableFlow">外链设置
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </tableOpts>
            </template>
          </el-table-column>
        </JNPF-table>
        <pagination :total="total" :page.sync="listQuery.currentPage"
          :limit.sync="listQuery.pageSize" @pagination="initData" />
      </div>
    </div>
    <Form v-if="formVisible" ref="Form" @close="closeForm" />
    <ViewForm v-if="viewFormVisible" ref="ViewForm" @close="closeForm" />
    <AddBox :visible.sync="addVisible" :webType="currWebType" @add="handleAdd" />
    <el-dialog title="发布" :visible.sync="releaseDialogVisible" v-if="releaseVisible"
      class="JNPF-dialog JNPF-dialog_center jnpf-release-dialog" lock-scroll width="600px"
      destroy-on-close @close='close'>
      <el-alert title="将该功能的按钮、列表、表单及数据权限发布至应用菜单" type="warning" :closable="false" show-icon />
      <el-form class="release-main" :model="releaseQuery" :rules="releaseQueryRule"
        label-position='top' label-width="50px" ref="releaseForm">
        <div class="release-item">
          <el-form-item>
            <div class="top-item" :class="{ active: releaseQuery.pc === 1 }"
              @click="selectToggle('pc')">
              <i class="item-icon icon-ym icon-ym-pc"></i>
              <p class="item-title">桌面端</p>
              <div class="icon-checked">
                <i class="el-icon-check"></i>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="上级" v-if="releaseQuery.pc" prop="pcModuleParentId">
            <JnpfTreeSelect v-model="releaseQuery.pcModuleParentId" :options="treeData" multiple
              checkStrictly placeholder="选择上级菜单" @change="treeSelectChange(arguments,'pc')" />
          </el-form-item>
          <el-form-item label="已发布菜单路径" v-if="currRow.pcIsRelease">
            <div class="released">{{ currRow.pcReleaseName }}</div>
          </el-form-item>
        </div>
        <div class="release-item">
          <el-form-item>
            <div class="top-item" :class="{ active: releaseQuery.app === 1 }"
              @click="selectToggle('app')">
              <i class="item-icon icon-ym icon-ym-mobile"></i>
              <p class="item-title">移动端</p>
              <div class="icon-checked">
                <i class="el-icon-check"></i>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="上级" prop="appModuleParentId" v-if="releaseQuery.app">
            <JnpfTreeSelect v-model="releaseQuery.appModuleParentId" :options="appTreeData"
              placeholder="选择上级菜单" @change="treeSelectChange(arguments,'app')" multiple
              checkStrictly />
          </el-form-item>
          <el-form-item label="已发布菜单路径" v-if="currRow.appIsRelease">
            <div class="released">{{ currRow.appReleaseName }}</div>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="releaseDialogVisible = false">{{$t('common.cancelButton')}}</el-button>
        <el-button type="primary" :loading="releaseBtnLoading" @click="releaseModel">
          {{$t('common.confirmButton')}}</el-button>
      </span>
    </el-dialog>
    <previewDialog :visible.sync="previewDialogVisible" :id="currId" :previewType="previewType"
      type="webDesign" />
    <EngineForm v-if="engineFormVisible" ref="engineForm" />
    <FlowManage v-if="manageVisible" ref="FlowManage" @close="manageVisible=false" />
    <LinkDialog v-if="linkVisible" ref="LinkDialog" @close="linkVisible=false" />
  </div>
</template>
<script>
import Form from './Form'
import ViewForm from './ViewForm'
import LinkDialog from './ShortLinkDialog'
import AddBox from '@/views/generator/AddBox'
import mixin from '@/mixins/generator/index'
import previewDialog from '@/components/PreviewDialog'
import { Release } from '@/api/onlineDev/visualDev'
import { getMenuSelectorFilter } from '@/api/system/menu'
import EngineForm from '@/views/workFlow/flowEngine/Form'
import FlowManage from '@/views/workFlow/flowEngine/FlowManagement'
import { getFormById } from '@/api/workFlow/FormDesign'
export default {
  name: 'onlineDev-webDesign',
  mixins: [mixin],
  components: { Form, ViewForm, AddBox, previewDialog, EngineForm, FlowManage, LinkDialog },
  data() {
    return {
      showAll: false,
      query: { keyword: '', type: 1 },
      sort: 'webDesign',
      previewDialogVisible: false,
      releaseDialogVisible: false,
      releaseBtnLoading: false,
      currRow: {},
      releaseQuery: {
        pc: 1,
        app: 1,
        pcModuleParentId: [],
        appModuleParentId: [],
        systemId: ''
      },
      treeData: [],
      appTreeData: [],
      pcSystemId: "",
      appSystemId: "",
      previewType: "",
      enginCategoryList: [],
      engineFormVisible: false,
      manageVisible: false,
      linkVisible: false,
      viewFormVisible: false,
      isRelease: '',
      isReleaseSystem: 0,
      pcIsRelease: 0,
      appIsRelease: 0,
      releaseVisible: false
    }
  },
  computed: {
    releaseQueryRule() {
      let newReleaseQueryRule = {}
      if (!this.pcIsRelease) newReleaseQueryRule.pcModuleParentId = [
        { required: true, message: '上级菜单不能为空', trigger: 'change', type: 'array' }
      ]
      if (!this.appIsRelease) newReleaseQueryRule.appModuleParentId = [
        { required: true, message: '上级菜单不能为空', trigger: 'change', type: 'array' }
      ]
      return newReleaseQueryRule
    }
  },
  created() {
    this.getEnginCategoryList()
  },
  methods: {
    preview(id, type) {
      this.currId = id
      this.previewType = type
      this.$nextTick(() => {
        this.previewDialogVisible = true
      })
    },
    releaseModel() {
      if (!this.releaseQuery.pc && !this.releaseQuery.app) return this.$message.error('请至少选择一种发布类型')
      this.$refs['releaseForm'].validate((valid) => {
        if (!valid) return
        if (!this.currRow.isRelease) return this.release()
        this.$confirm('发布确定后会覆盖当前线上版本且进行菜单同步，是否继续？', '提示', {
          type: 'warning'
        }).then(() => {
          setTimeout(() => {
            this.release()
          }, 200)
        }).catch(() => { });
      })
    },
    close() {
      this.releaseBtnLoading = false
      this.releaseDialogVisible = false
      this.releaseVisible = false
    },
    openReleaseDialog(row) {
      this.currRow = row
      this.releaseVisible = true
      this.releaseDialogVisible = true
      this.pcSystemId = ""
      this.appSystemId = ""
      this.isReleaseSystem = row.isRelease || 0
      this.pcIsRelease = row.pcIsRelease || 0
      this.appIsRelease = row.appIsRelease || 0
      let platformRelease = row.platformRelease ? JSON.parse(row.platformRelease) : {}
      this.$nextTick(() => {
        this.$refs['releaseForm'] && this.$refs['releaseForm'].clearValidate()
      })
      this.releaseQuery = {
        pc: platformRelease.pc === 0 ? 0 : 1,
        app: platformRelease.app === 0 ? 0 : 1,
        pcModuleParentId: [],
        appModuleParentId: [],
      }
      this.getMenuSelector(row.id)
      this.getAPPMenuSelector(row.id)
    },
    selectToggle(key) {
      this.releaseQuery[key] = this.releaseQuery[key] === 1 ? 0 : 1
      const type = key == 'pc' ? 'pcModuleParentId' : 'appModuleParentId'
      this.$nextTick(() => {
        this.$refs.releaseForm && this.$refs.releaseForm.clearValidate(type)
      })
    },
    treeSelectChange(data, type) {
      const systemId = data[1].systemId
      if (type == 'pc') this.pcSystemId = systemId
      if (type == 'app') this.appSystemId = systemId
    },
    // 发布菜单
    release() {
      this.releaseBtnLoading = true
      this.releaseQuery.pcSystemId = this.pcSystemId
      this.releaseQuery.appSystemId = this.appSystemId
      let platform = {
        pc: this.releaseQuery.pc,
        app: this.releaseQuery.app
      }
      let query = {
        ...this.releaseQuery,
        platformRelease: JSON.stringify(platform)
      }
      Release(this.currRow.id, query).then(res => {
        this.releaseDialogVisible = false
        this.releaseVisible = false
        this.releaseBtnLoading = false
        this.initData()
        this.$message({
          type: 'success',
          message: res.msg,
          duration: 1000,
        });
      }).catch(() => { this.releaseBtnLoading = false })
    },
    getMenuSelector(id) {
      getMenuSelectorFilter({ category: 'Web' }, id).then(res => {
        this.treeData = res.data.list
      })
    },
    getAPPMenuSelector(id) {
      getMenuSelectorFilter({ category: 'App' }, id).then(res => {
        this.appTreeData = res.data.list || []
        for (let index = 0; index < this.appTreeData.length; index++) {
          const item = this.appTreeData[index];
          if (item.type == 0) {
            item.disabled = true
          }
        }
      })
    },
    getEnginCategoryList() {
      this.$store.dispatch('base/getDictionaryData', { sort: 'WorkFlowCategory' }).then((res) => {
        this.enginCategoryList = res
      })
    },
    showManage(id, fullName) {
      this.manageVisible = true
      this.$nextTick(() => {
        this.$refs.FlowManage.init(id, fullName)
      })
    },
    handleEngine(id) {
      getFormById(id).then(res1 => {
        let flowId = res1.data && res1.data.id
        this.engineFormVisible = true
        this.$nextTick(() => {
          this.$refs.engineForm.init(this.enginCategoryList, flowId, 1)
        })
      })

    },
    handleLink(id) {
      this.linkVisible = true
      this.$nextTick(() => {
        this.$refs.LinkDialog.init(id)
      })
    }
  }
}
</script>